<template>
  <div class="container">
    <swiper class="swiperWrap" ref="mySwiper" :options="swiperOptions">
      <swiper-slide class="slide" v-for="items in imgList" :key="items.id">
        <a :href="items.link">
          <img :src="items.url" alt="" />
        </a>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev" @click="pre"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next" @click="next"></div>
    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  name: 'carrousel',
  props: {
    imgList: Array
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 6,
        spaceBetween: 20,
        autoplay: false,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  created(){
    if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
         this.swiperOptions.slidesPerView = 4
         this.swiperOptions.spaceBetween = 10
    }
  },
  mounted() {
     
  },
  methods: {
    pre() {
      this.$refs.mySwiper.$swiper.slidePrev()
    },
    next() {
      this.$refs.mySwiper.$swiper.slideNext()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  position: relative;
  z-index: 3;
}
.swiperWrap {
  width: 90%;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.swiper-button-prev,
.swiper-button-next {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f00;
  font-size: 20px;
  
  &::after {
    display: none;
  }
}
.swiper-button-prev {
  background: url('../assets/img/leftIcon.png') no-repeat;
  background-size: 100% 100%;
  left: 0;
}
.swiper-button-next {
  background: url('../assets/img/rightIcon.png') no-repeat;
  background-size: 100% 100%;
  right: 0;
}
@media screen and (max-width:768px){
  .swiperWrap{
    width: 86%;
  }
  .swiper-button-prev,
.swiper-button-next{
  width: 25px;
  height: 25px;
}
.swiper-button-prev {
  left: -6px;
}
.swiper-button-next {
  
  right: -6px;
}
}
</style>
